import calculate_age from '@/utils/age';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Tooltip } from 'antd';
import React, { useEffect, useRef, useState } from 'react'
import PatientDetails from './components/PatientDetails';
import { get_grading_patient_list, get_grading_platform_select } from '@/services/patient';

type GithubIssueItem = {
    phone: string;
    id: number;
    name: string;
    sex: string;
    birth: string;
    id_card: string;
    address: number;
    create_time: string;
    bind_platform: string[];
    info_status: number;
    province: string;
    city: string;
    area: string;
    family_address: string;
};

const SubordinatePatients = () => {
    const actionRef = useRef<ActionType>();
    // 存储当前id
    const [id, setId] = useState<number>();
    // 存储当前身份证号
    const [id_card, setId_card] = useState<any>();
    // 存储下属机构下拉框数据
    const [platform, setPlatform] = useState<any>([]);
    // 控制下属机构患者详情模态框的状态
    const [isModalOpen1, setIsModalOpen1] = useState(false);

    // 控制下属机构患者详情模态框显示和隐藏
    const isShowModal1 = (show: boolean) => {
        setIsModalOpen1(show);
    };

    // 获取下属机构患者列表数据
    const getPatientData = async (params: {
        pageSize?: number | undefined;
        current?: number | undefined;
        keyword?: string | undefined;
    }) => {
        //默认分页参数和后端接口字段不匹配
        let request_body = {
            ...params,
            current: params.current,
            pageSize: params.pageSize,
        };
        const res = await get_grading_patient_list(request_body);
        console.log('下属机构患者列表', res);
        return {
            data: res.data.list,
            success: true,
            total: res.data.total_count,
        };
    };
    // 获取下属机构下拉列表
    useEffect(() => {
        const getPlatformList = async () => {
            let res: any = await get_grading_platform_select()
            let arr: any = [];
            res.data.map((item: { id: number; name: string }) => {
                arr[item.id] = { text: item.name }
            })
            setPlatform(arr)
        }
        getPlatformList()
    }, [])
    // 下属机构患者列表字段
    const columns: ProColumns<GithubIssueItem>[] = [
        {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
            valueType: 'index',
            width: 48,
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
        },
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            align: 'center',
            hideInSearch: true,
            valueEnum: {
                0: {
                    text: '未知',
                },
                1: {
                    text: '男',
                },
                2: {
                    text: '女',
                },
            },
        },
        {
            title: '性别',
            dataIndex: 'sex',
            onFilter: true,
            valueType: 'select',
            hideInTable: true,
            valueEnum: {
                0: {
                    text: '未知',
                },
                1: {
                    text: '男',
                },
                2: {
                    text: '女',
                },
            },
        },
        {
            title: '年龄',
            dataIndex: 'birth',
            key: 'birth',
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return calculate_age(record.birth);
            },
        },
        {
            title: '身份证号',
            key: 'id_card',
            dataIndex: 'id_card',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '家庭住址',
            key: 'family_address',
            dataIndex: 'family_address',
            align: 'center',
            hideInSearch: true,
            render: (_, record) => {
                return record.province ? (
                    <Tooltip title={record.province + record.city + record.area + record.family_address}>
                        {(record.province + record.city + record.area + record.family_address).length > 10
                            ? (record.province + record.city + record.area + record.family_address).substring(
                                0,
                                10,
                            ) + '...'
                            : record.province + record.city + record.area + record.family_address}
                    </Tooltip>
                ) : (
                    record.family_address
                );
            },
        },
        {
            title: '注册时间',
            key: 'create_time',
            dataIndex: 'create_time',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '注册时间',
            dataIndex: 'create_time',
            valueType: 'dateRange',
            hideInTable: true,
            search: {
                transform: (value) => {
                    return {
                        start_date: value[0],
                        end_date: value[1],
                    };
                },
            },
        },
        {
            title: '所属机构',
            dataIndex: 'bind_platform',
            key: 'bind_platform',
            align: 'center',
            hideInSearch: true,
            render: (_, record) => (
                <Tooltip title={record.bind_platform.map((item) => item).join()}>
                    {record.bind_platform.map((item) => item).join().length > 10
                        ? record.bind_platform
                            .map((item) => item)
                            .join()
                            .substring(0, 10) + '...'
                        : record.bind_platform.map((item) => item).join()}
                </Tooltip>
            ),
        },
        {
            title: '所属机构',
            dataIndex: 'platform_id',
            key: 'platform_id',
            align: 'center',
            hideInTable: true,
            valueType: 'select',
            valueEnum: platform,
            fieldProps: {
                showSearch: true,
                filterOption: (input: any, option: any) =>
                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            },
        },
        {
            title: '状态',
            dataIndex: 'info_status',
            key: 'info_status',
            hideInTable: true,
            valueType: 'select',
            valueEnum: {
                0: {
                    text: '未完善信息',
                },
                1: {
                    text: '已完善信息',
                },
            },
        },
        {
            title: '操作',
            valueType: 'option',
            align: 'center',
            key: 'option',
            render: (text, record, _, action) => (
                <Button
                    key="view"
                    type="link"
                    onClick={() => {
                        console.log('record', record);
                        setId(record.id);
                        setId_card(record.id_card != '' ? record.id_card : undefined);
                        isShowModal1(true);
                    }}
                >
                    患者详情
                </Button>

            ),
        },
    ];
    return (
        <PageContainer header={{
            breadcrumb: {},
        }}>
            <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params = {}) => getPatientData(params)}
                editable={{
                    type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                    labelWidth: 'auto',
                    collapseRender: false,
                    collapsed: false,
                    span: 6,
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                pagination={{
                    pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="下属机构患者列表"
            />
            {/* 查看患者详情 */}
            {isModalOpen1 ? (
                <PatientDetails
                    isModalOpen1={isModalOpen1}
                    isShowModal1={isShowModal1}
                    id_card={id_card}
                    id={id}
                ></PatientDetails>
            ) : (
                ''
            )}</PageContainer>
    )
}
export default SubordinatePatients